<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <body id="loginBack">
  <el-form class="login-container">

    <span style="margin-left: -10%;font-size: 40px;"><i class="el-icon-cherry logo-color"></i>瀚海科技<i class="fa fa-free-code-camp logo-color"></i></span>
     <el-form-item label="用户名：" >
      <el-input v-model="User.userName"
       placeholder="请输入用户名" 
       maxlength="10" 
       show-word-limit clearable="true"
       prefix-icon="el-icon-user"
       ></el-input>
    </el-form-item>

    <el-form-item label="密码：">
      <el-input v-model="User.password"
       placeholder="请输入密码" 
        show-password clearable="true"
         @keyup.enter.native="login"
         prefix-icon="el-icon-key"
         ></el-input>
    </el-form-item>

    <el-button type="primary" v-on:click="login" style="width: 120px">登录</el-button>
  </el-form>
  </body>

</template>

<style>
  .login-container {
    margin-left: 60%;
    margin-top: 13%;
    border-radius: 15px;
    background-clip: padding-box;
    /*margin: 90px auto;*/
    width: 300px;
    padding: 35px 35px 15px 35px;
    background: #cbf3ff;
    border: 1px solid #2c3e50;
    box-shadow: 0 0 25px rgba(100, 100, 161, 0.48);
  }
  #loginBack {
    background: url("../assets/login.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  .logo-color {
    color: #ae08ff;
  }
</style>

<script>
  export default {
    name: 'login',
    data() {
      return {
        User:  {
          userName: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login(){
        this.$axios.post(
          '/login',
          {
            userName: this.User.userName,
            password: this.User.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200){
              alert("welcome"+this.User.userName);
              //将数据存储到前段本地供其他页面调用
              localStorage.setItem('ms_username',this.User.userName)
              // this.$router.replace({  path:'index'  } ) //也可以用下面的这种
              this.$router.push('/');

            }else if(this.User.userName == '' || this.User.password == ''){
              this.$message.error('请输入账号或密码')
            }else {
              alert("账号密码错误！请重试！")
            }
          })
          .catch(failResponse => {

          })
      }
    }
  }
</script>
